<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .mapcontain {
            width: 100%;
            height: 100%;
        }

        #allmap {
            height: 100%;
            width: 100%;
        }

        #result {
            position: fixed;
            top: 10px;
            left: 20px;
            width: 300px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #fff;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
            border-radius: 7px;
            z-index: 99;
        }
    </style>
    <script type="text/javascript"
        src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=dHgMAvhjhtnDE129YAhKnLao2tYir9mm"></script>
    <title>根据起点和终点经纬度驾车导航</title>
</head>

<body style="margin: none">
    <div class="mapcontain">
        <div id="allmap"></div>
    </div>
    <div id="result">根据起点和终点经纬度驾车导航</div>
</body>

</html>
<script type="text/javascript">
    var map = new BMapGL.Map('allmap');
    var point = new BMapGL.Point(116.51397, 39.73517);
    map.centerAndZoom(point, 11);
    map.enableScrollWheelZoom(true);

    var driving = new BMapGL.DrivingRouteLine(map, {
        renderOptions: {
            map: map,
            autoViewport: true,
            hideMarkers: true, // 不显示起点和终点标记
            showPolyline: false // 不绘制路线
        },
    });
    driving.setSearchCompleteCallback(function () {
        var plan = driving.getResults().getPlan(0)
        // console.log(plan);
        for (var i = 0; i < plan.getNumRoutes(); i++) {
            var route = plan.getRoute(i);
            // console.log(route.points);

            var polyline = new BMapGL.Polyline(route.points, {
                strokeColor: '#ff0000',
                strokeWeight: 5,
                strokeOpacity: 1,
            })
            map.addOverlay(polyline)
        }
    });
    var start = new BMapGL.Point(116.236532, 39.904113661);
    var start2 = new BMapGL.Point(116.310791, 40.003419);
    var end = new BMapGL.Point(116.545486, 40.006040);
    var end2 = new BMapGL.Point(116.486419, 39.877282);
    var way2 = new BMapGL.Point(116.36315661025989, 39.904113661);
    var way1 = new BMapGL.Point(116.49257333444989, 39.87920464090217);
    var way = '39.87920464090217,116.49257333444989|39.87806279099342,116.49218746174857'

    driving.search(start, end, {
        waypoints: [way2]
    });



    // driving2 细线条
    var driving2 = new BMapGL.DrivingRoute(map, {
        renderOptions: {
            map: map,
            autoViewport: true,
        },
    });
    driving2.search(start2, end2, {
    });
    // 删除起始,终止坐标
    driving2.setMarkersSetCallback(function (routes) {
        map.removeOverlay(routes[0].marker);
        map.removeOverlay(routes[routes.length - 1].marker);
        for (var m = 1; m < routes.length - 1; m++) {
            var mm = routes[m].Nm;
            map.removeOverlay(mm)
        }
    });
    driving2.setSearchCompleteCallback(function () {
        var plan = driving2.getResults().getPlan(0)
        var route = plan.getRoute(0);
        let path = route.getPath();

        setTimeout(() => {
            console.log((parseInt(path.length / 2)));

            var polyline = new BMapGL.Polyline(path, {
                strokeColor: '#ff0000',
                strokeWeight: 8,
                strokeOpacity: 1,
            })
            // 添加点击事件监听器
            polyline.addEventListener("click", function (e) {
                console.log("折线被点击了");
                console.log("点击的折线点坐标: " + e.point.lng + ", " + e.point.lat);
            });
            map.addOverlay(polyline)

            var label = new BMapGL.Label("晋AR196Z");
            label.setPosition(path[parseInt(path.length / 2)]); // 设置位置为中间部分
            map.addOverlay(label);
        }, 100);

    });

</script>